<template>
  <div class="">
    <div class="common_title pad_b20 margin_b20">新增/编辑服务部门</div>
    <div class="bg_fff pad_tb40">
      <el-form ref="form" :rules="rules" :model="form"  label-width="120px">
        <el-row>
          <FormItem label="部门名称" class="" type="input" :form="form" prop="name" clearable />
          <FormItem label="项目名称" class="" type="input" :form="form" prop="project_name" clearable />
        </el-row>
        <el-row>
          <FormItem label="部门简称" class="" type="input" :form="form" prop="short_name" clearable />
          <FormItem label="部门类型" class="" type="select" :form="form" prop="type" :seleDatas="openOptions" seleKey="id" seleName="title" clearable />
        </el-row>
        <el-row>
          <el-form-item label="营业执照" prop="business_license">
            <SigleUpload :img="form.business_license?('/storage/'+form.business_license):''" accept="image/*" type="picture-card" formkey="business_license" form="form" @PicturePreview="PicturePreview" @handleUploadSuccess="handleUploadSuccess" @handleUploadRemove="handleUploadRemove"></SigleUpload>
          </el-form-item>
        </el-row>

        <div class="bottom_btn pad_t10" style="padding-left: 120px;">
            <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">提交</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
        </div>
      </el-form>

    </div>

    <!-- 上传图片预览 -->
    <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
      <img style="width: 100%;" :src="uploadImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
// 上传组件
import SigleUpload from "@/components/UploadImage/sigleUpload";
export default {
  name: 'add_company',
  components: {SigleUpload},
  data () {
    return {
      id: '',
      is_ajax: false,
      form: {
          business_license_id:'',
          business_license:''
      },
      rules: {
        // project_name: [
        //   { required: true, message: "项目名称不能为空",trigger: "blur"}
        // ],
        name: [
          { required: true, message: "部门名称不能为空",trigger: "blur"}
        ],
        short_name: [
          { required: true, message: "部门简称不能为空",trigger: "blur"}
        ],
        type: [
          { required: true, message: "部门类型不能为空",trigger: "blur"}
        ]
      },
      openOptions: [],
      open:false,
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false
    }
  },
  created() {
    this.id=this.$route.query.id || '';
    this.get_options()
    if(this.id){
        this.get_data()
    }
  },
  methods:{
    get_options(){
       const _this=this;
       _this.axios.get("/api/Unit/getTypeOption", {params:{}}).then(function(res) {
          if(res){
            _this.openOptions=res.data
          }
       }).catch(function(error) {
         console.log(error);
       })
    },
    // 上传图片--s
    PicturePreview(file) {
      this.uploadImageUrl = file.url;
      this.uploadImgVisible = true;
    },
    handleUploadSuccess(res){
      console.log(res)

      this[res.form]['business_license_id']=res.id
      this[res.form][res.key]=res.url
    },
    handleUploadRemove(res){
      this[res.form][res.key]=''
    },

    // 表单重置
    reset(pid) {
      this.form = {
        business_license_id:'',
        business_license:''
      };
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      this.$refs[form].validate((valid)  => {
        if (valid) {
          this.is_ajax=true;
          if(form=='form'){
            let url="/api/Unit/create";
            if(this.form.id){
              url="/api/Unit/edit"
            }
            this.axios.post(url, this.form).then((res) => {
                if (res) {
                    this.$message.success('操作成功');
                    this.$router.go(-1)
                } else {
                    this.$message.error(res.message);
                }
                this.is_ajax=false;
            }).catch((err) => {
                console.log(err);
                this.is_ajax=false;
            });
          }
        }
      });
    },
    get_data(){
        this.axios.get("/api/Unit/read", {params:{id:this.id}}).then((res) => {
            if (res) {
                this.form=res.data;
            } else {
                this.$message.error(res.message);
            }
        }).catch((err) => {
            console.log(err);
        });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
